<template>
  <div class="mr-root">
    <public-header>
      <p class="title">斗鱼TV</p>
    </public-header>
    <loading v-if="showLoading"></loading>
    <div class="mr-content">
      <home-item v-for="(room,index) in roomList" :r="room" :key="index"></home-item>
      <p v-if="error">不好意思，加载失败，请稍后再试...</p>
      <div class="clear"></div>
      <div class="loadMore " v-if="!showLoading"> <span class="load" @click="loadMore">点击加载更多</span> </div>
    </div>
    <back-top></back-top>
  </div>
</template>
<script>
  import HomeItem from '../components/HomeItem'
  import Public from '../public.js'
  import BackTop from '../components/BackTop'
  export default {
    mixins: [Public],
    components: {
      HomeItem,
      BackTop

    },
    data() {
      return {
        showLoading: true,
        roomList: [],
        error: false,
        count: 0,
        scroll: false
      }
    },
    methods: {
      getRoomList(page) {
        this.axios.get('/douyuapi/RoomApi/live?offset=' + page + 'limit=20')
          .then(data => {
            this.error = false
            this.roomList = this.roomList.concat(data.data.data)
            setTimeout(() => {
              this.showLoading = false
            });
          })
          .catch(err => {
            setTimeout(() => {
              this.showLoading = false
            });
            this.error = true
            console.log(err)
          })
      },
      loadMore() {
        this.count++
          this.getRoomList(this.count)
      }

    },
    created() {
      this.getRoomList(this.count)
    }
  }

</script>
<style lang="">
  .mr-content {
    padding: 44px 0 0 0.3rem;
    overflow: hidden;
  }
  
  .loadMore {
    margin: 15px 0;
    text-align: center;
  }
  
  .load {
    display: inline-block;
    border: 1px solid #000;
    line-height: 30px;
    border-radius: 10px;
    width: 2.5rem;
  }

</style>
